<template>
  <div class="warp-box">
    <!-- <el-row class="search-box" :gutter="10">
      <el-col :span="20">
        <el-select style="width:200px" v-model="parames.state" size="small" placeholder="默认分类">
          <el-option label="默认分类" value="1">
            <span style="float: left">默认分类</span>
            <span style="float: right; color: #8492a6; font-size: 10px">
              <i class="el-icon-edit"></i>
              <i style="margin-left:5px;" class="el-icon-delete"></i>
            </span>
          </el-option>
        </el-select>
        <el-input
          style="width:340px"
          v-model="parames.name"
          size="small"
          placeholder="搜索客户名称、联系人、联系方式"
        ></el-input>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="text" icon="el-icon-s-open" @click="handleSearch">高级搜索</el-button>
      </el-col>
    </el-row> -->
    <el-row class="main-box channel1234" style="margin:10px -5px;">
      <el-col :span="24">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd">新建渠道</el-button>
      </el-col>
      <el-col :span="24">
        <el-table
          :data="tableData"
          border
          v-loading="loading"
          @row-click="handleRow"
          :row-class-name="tableRowClassName"
          style="margin-top:14px;"
        >
          <el-table-column
            show-overflow-tooltip
            fixed="left"
            prop="channelName"
            label="渠道商名称"
          ></el-table-column>
          <el-table-column prop="contacts" label="联系人"></el-table-column>
          <el-table-column prop="mobile" label="联系方式"></el-table-column>
          <el-table-column prop="email" label="邮箱"></el-table-column>
          <el-table-column prop="director" label="负责人"></el-table-column>
          <el-table-column prop="overt" label="是否启用">
            <template slot-scope='scope'>
              <p>{{scope.row.enable?'是':'否'}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="overt" label="是否公开">
            <template slot-scope='scope'>
              <p>{{scope.row.overt?'是':'否'}}</p>
            </template>
          </el-table-column>
          <el-table-column
              prop="resourceAttribution"
              label="渠道来源">
              <template slot-scope="scope">
                <div v-if="scope.row.resourceAttribution">{{scope.row.resourceAttribution.desc}}</div>
              </template>
          </el-table-column>
          <el-table-column
              prop="resourceAttribution"
              label="签约日期">
              <template slot-scope="scope">
                <div v-if="scope.row.resourceAttribution">{{scope.row.signingDate | formatDate}}</div>
              </template>
          </el-table-column>
          <el-table-column width="80" align="center" fixed="right">
            <template slot="header" slot-scope>
              <i class="el-icon-setting" @click="handleSetTitle" style="text-align: center;display:block;cursor:pointer"></i>
            </template>
            <template slot-scope>
              <el-button size="mini" type="text" icon="el-icon-search"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <!-- <el-col :span="24">
        <el-pagination
          style="text-align:center;margin-top:20px;float:right;"
          v-if="total >= pagelimit"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageindex"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="pagelimit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-col> -->
    </el-row>
    <createdDialog :dialogData="dialogData" @checkRender="getList"></createdDialog>
    <detailDialog :detailData="detailData" @checkRender="getList"></detailDialog>

  </div>
</template>

<script>
import createdDialog from "./addChannelDialog.vue"; //新建渠道
// import searchDialog from "./opportSearchDialog.vue"; //高级搜索弹窗
import detailDialog from "./channelDetail.vue"; //详情弹窗

export default {
  data() {
    return {
      loading: false,
      parames: {
        name: "",
        state: "",
        date: []
      },
      dialogData: {
        //新建弹窗
        type: '',
        title: '',
        show: false
      },
      searchData: {
        //搜索弹窗
        show: false
      },
      titleData: {
        //表头列弹窗
        show: false
      },
      detailData: {
        //详情弹窗
        show: false
      },
      total: 100,
      pagelimit: 10,
      pageindex: 1,
      tableData: []
    };
  },
  components: {
    createdDialog,
    // searchDialog,
    detailDialog
  },
  methods: {
    handleSetTitle () { //设置表头列
      this.titleData.show = true
    },
    handleAdd() {//新建客户
      this.dialogData.type = 'new';
      this.dialogData.title = '新建渠道';
      this.dialogData.show = true;
    },
    handleCurrentChange(val) {
      //页码改变
      var that = this;
      that.pageindex = val;
      // that.getList()
    },
    handleSizeChange(val) {
      //页码个数
      this.pagelimit = val;
      // this.getList()
    },
    getList() {//获取页面数据
      this.loading = true
      this.$post(this.$api.postChannelList).then(response => {
        if (response.status == 200) {
            this.tableData = response.data.data
        }
        setTimeout(() => {
          this.loading = false
        }, 200);
      })
    },
    handleRow(row) {
      //点击某一行数据打开详情
      this.detailData.id = row.id;
      this.detailData.show = true;
    },
    search() {
      //查询
      this.pageindex = 1;
      this.getList()
    },
    handleSearch() {
      //打开高级搜索弹窗
      this.searchData.show = true;
    },
    tableRowClassName({ row, rowIndex }) {
      //斑马表格
      if (rowIndex % 2 === 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
      return "";
    }
  },
  mounted() {
    this.getList()
  }
};
</script>

<style>
.el-table .warning-row {
  background: #f9f9f9;
}
.el-table .success-row {
  background: #fff;
}
</style>